<template>
  <div class="container">
    <el-button type="success" icon="el-icon-edit" @click="subjectVisible = true">新增学科</el-button>
    <el-dialog :title="title" width="30%" :visible.sync="subjectVisible" @close="close">
      <el-form :model="addData" ref="addref" :rules="addrules">
        <el-form-item prop="subjectName" label="学科名称" label-width="25%">
          <el-input v-model.trim="addData.subjectName" placeholder="请输入学科名称"></el-input>
        </el-form-item>
        <el-form-item prop="isFrontDisplay" label="是否显示" label-width="25%">
          <el-switch v-model="addData.isFrontDisplay" active-color="green" inactive-color="#ff4949"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="addSubject">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add, getSubjectById, editeSubjectById } from '@/api/hmmm/subjects'

export default {
  name: 'SubjectAdd',
  props: {
    editeshow: {
      type: Number,
    },
    editeId: {
      type: Number,
    },
  },
  data() {
    return {
      addData: {
        subjectName: '',
        isFrontDisplay: null,
      },
      addrules: {
        subjectName: [{ required: true, message: '请输入学科名称', trigger: 'blur' }],
      },
      subjectVisible: false,
      title: '新增学科',
      status1: 200,
    }
  },
  methods: {
    addSubject() {
      this.$refs.addref.validate(async (valid) => {
        let msg = '添加学科成功'
        if (!valid) return
        if (this.editeshow === 1) {
          msg = '修改学科成功'
          const data = {
            id: this.editeId,
            subjectName: this.addData.subjectName,
            isFrontDisplay:this.addData.isFrontDisplay
          }
          const { status } = await editeSubjectById(data)
          this.status1 = status
        } else {
          console.log(this.addData)
          const { status } = await add(this.addData)
          this.status1 = status
        }
        if (this.status1 !== 200) {
          return this.$message.error('操作失败')
        }
        this.$message.success(msg)
        this.subjectVisible = false
        this.$emit('add')
      })
    },
    close() {
      this.$refs.addref.resetFields()
      this.isdisplay = false
      this.subjectVisible = false
      this.$emit('edite', 0)
    },
    async getSubject() {
      const { status, data } = await getSubjectById(this.editeId)
      if (status !== 200) {
        return this.$message.error('请求学科数据失败')
      }
      this.addData = data
    },
  },
  watch: {
    editeshow(val) {
      if (val === 1) {
        this.subjectVisible = true
        this.title = '修改学科'
        this.getSubject()
      } else {
        this.title = '新增学科'
      }
    },
    addData() {
      if (this.addData.isFrontDisplay) {
        this.addData.isFrontDisplay = this.addData.isFrontDisplay === 0 ? false : true
      }
    }
  },
}
</script>

<style scoped lang="less">
.dialog-footer {
  text-align: center;
}
.el-input{
  width: 88%;
} 
</style>
